<!DOCTYPE html>
<html>
<head>
    <title>PaddleHub: Image-Poem</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #f8f8f8;
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        h1 {
            margin: 0;
            font-size: 24px;
            color: #333;
        }

        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: calc(100vh - 130px);
            background-color: #f0f0f0;
            padding: 30px;
        }

        .containerSon {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            border-right: 1px solid black;
        }

        .pic {
            height: 50vh;
            width: 80%;
            border: 1px solid black;
        }

        .sidebar {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* border-right: 1px solid #ddd; */
            /* padding-right: 20px; */
            margin-top: 10px;
        }

        .main-content {
            display: flex;
            flex-direction: column;
            /* justify-content: flex-end; */
            align-items: center;
            padding-left: 20px;
        }

        .form-group1 {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            position: relative;
        }

        #image {
            width: 550px;
            height: 400px;
        }

        .form-group3 {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
        }

        .form-group4 {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
        }

        .fileName {
            margin-bottom: 10px;
        }

        label {
            display: block;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="password"] {
            width: 200px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        #poemButton {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            margin-bottom: 10px;
            margin-top: 10px;
            height: 40px;
        }

        #poemButton:hover {
            background-color: #0056b3;
        }

        #poemContainer {
            width: 80%;
            height: 50vh;
            border: 1px solid black;
            text-align: center;
            overflow: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #generatedPoem {
            font-size: 30px;
            color: #333;
            white-space: pre-line;
        }


        #loading-icon {
            width: 50px;
            height: 50px;
            border: 2px solid #ccc;
            border-radius: 50%;
            border-top-color: #333;
            animation: spin 1s linear infinite;
            display: none;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
    <meta charset="UTF-8">
</head>
<body>
<header>
    <meta charset="UTF-8">
    <h1>《AI看图写诗》</h1>
</header>

<div class="container">
    <div class="containerSon">
        <div class="pic">
            <img id="image" style="width: 100%; height: 100%">
        </div>
        <div class="sidebar">
            <div class="form-group1">
                <!-- <label for="imageUpload">Upload Image:</label>-->
                <button onclick="imageUpload.click()">选择图片</button>
                <input type="file" id="imageUpload" accept="image/*" style="display:none;">
                <div id="showPic" style="margin-left: 15px;">
                    <button onclick="loadLocalImage()">展示图片</button>
                </div>
            </div>
            <div class="fileName" id="fileName">
            </div>
            <div class="form-group3">
                <label for="password">百度智能云AppId:</label>
                <input id="app_id">
                <label for="password">百度智能云API Key:</label>
                <input id="api_key">
            </div>
            <div class="form-group4">
                <label for="password">百度智能云Secret Key:</label>
                <input id="access_token">
                <label for="password">飞浆星河Access Token:</label>
                <input id="classify_secret_key">
            </div>


        </div>
    </div>

    <div class="main-content">
        <div id="poemContainer">
            <p id="generatedPoem">
            </p>
            <div id="loading-icon"></div>
        </div>
        <div style="display: flex; justify-content: center; flex: 1; align-items: center;">
            <button id="poemButton" onClick="generatePoem()">点击生成诗句</button>
        </div>

    </div>
</div>

<script>
    function loadLocalImage() {
        let input = document.getElementById('imageUpload');
        if (input.files && input.files[0]) {
            let reader = new FileReader();
            reader.onload = function (e) {
                let img = document.getElementById('image');
                img.src = e.target.result;
                // console.log(img.src)
            }
            reader.readAsDataURL(input.files[0]);
            name = input.files[0].name;
        }
    }

    var input = document.getElementById('imageUpload');
    input.addEventListener('change', function (event) {
        handleFileUpdate(event)
    });

    function handleFileUpdate(e) {
        var fileList = e.target.files;    // 文件默认是列表
        var file = fileList[0]
        document.getElementById('fileName').innerHTML = file.name
    }

    function generatePoem() {
        const access_token = document.getElementById('access_token').value;
        const app_id = document.getElementById('app_id').value;
        const api_key = document.getElementById('api_key').value;
        const classify_secret_key = document.getElementById('classify_secret_key').value;

        const input = document.getElementById('imageUpload');
        var file = input.files[0];
        var formData = new FormData();
        formData.append('access_token', access_token);
        formData.append('app_id', app_id);
        formData.append('api_key', api_key);
        formData.append('classify_secret_key', classify_secret_key);
        formData.append('image', file);

        document.getElementById('loading-icon').style.display = 'block';
        generatedPoem.style.display = 'none';
        const poemButton = document.getElementById('poemButton')
        poemButton.disabled = true
        var reader = new FileReader();
        reader.onload = function (e) {
            // console.log(e.target)
            var byteArr = new Uint8Array(e.target.result);
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://127.0.0.1:8000/poe', true);
            xhr.onload = function () {
                if (xhr.status === 200) {
                    var responseText = xhr.responseText;
                    responseText = responseText.replace(/"/g, ''); // 去掉所有双引号
                    responseText = responseText.split('\n').join('<br>');
                    responseText = responseText.split('  ').join('<br>');
                    generatedPoem.innerHTML = responseText;
                    document.getElementById('loading-icon').style.display = 'none';
                    generatedPoem.style.display = 'block';
                    poemButton.disabled = false;
                } else {
                    console.error('error');
                    generatedPoem.innerHTML = '请正确填写左侧信息';
                    document.getElementById('loading-icon').style.display = 'none';
                    generatedPoem.style.display = 'block';
                    poemButton.disabled = false;
                }
            };
            xhr.send(formData);
            // console.log(byteArr)
            // console.log(typeof (byteArr))
            // xhr.setRequestHeader('Content-Type', 'application/json');
            // xhr.send(JSON.stringify({
            //     // api_key: username,
            //     access_token: access_token,
            //     app_id: app_id,
            //     api_key: api_key,
            //     classify_secret_key: classify_secret_key,
            //     file: byteArr.toString()
            // }));
        };
        reader.readAsArrayBuffer(file);

        // Send data to Python backend for poem generation

    }
</script>
</body>
</html>